<template>
	<view class="page tn-safe-area-inset-bottom" :style="{paddingTop: vuex_custom_bar_height + 'px'}">
		<view class="top-bg"></view>
		<dawnBar title="退款申请审核"></dawnBar>
		<view class="page-container">
			<view v-if="examine.id">
				<view class="tn-bg-white dawn-shadow tn-padding dawn-radius tn-margin-top-sm">
					<view class="list-text">
						<view class="list__left">
							<view class="list__left__text">缴费商户</view>
						</view>
						<view class="list__right list-text__right">
							{{appConfig.appTitle || '' }}
						</view>
					</view>
					<view class="list-text">
						<view class="list__left">
							<view class="list__left__text">订单号</view>
						</view>
						<view class="list__right list-text__right">
							{{ examine.orderNo }}
						</view>
					</view>
					<view class="list-text">
						<view class="list__left">
							<view class="list__left__text">病人ID</view>
						</view>
						<view class="list__right list-text__right">
							{{ examine.patientId }}
						</view>
					</view>
					<view class="list-text">
						<view class="list__left">
							<view class="list__left__text">病人姓名</view>
						</view>
						<view class="list__right list-text__right">
							{{ examine.patientName }}
						</view>
					</view>
					<view class="list-text">
						<view class="list__left">
							<view class="list__left__text">缴费业务</view>
						</view>
						<view class="list__right list-text__right">
							<tn-tag class="dawn-tag-sm dawn-tag-sm__4">{{ examine.business  || '' }}</tn-tag>
						</view>
					</view>
					<view class="list-text">
						<view class="list__left">
							<view class="list__left__text">总金额</view>
						</view>
						<view class="list__right list-text__right">
							<tn-tag class="dawn-tag-sm dawn-tag-sm__1">¥
								{{ examine.totalCost  }}</tn-tag>
						</view>
					</view>
					
					<view class="list-text" v-if="examine.payScene">
						<view class="list__left">
							<view class="list__left__text">支付场景</view>
						</view>
						<view class="list__right list-text__right">
							{{ examine.payScene }}
						</view>
					</view>
					<view class="list-text">
						<view class="list__left">
							<view class="list__left__text">支付方式</view>
						</view>
						<view v-if="payOrder.ifCode === 'wxpay'" class="list__right list-text__right dawn-color-red">
							微信支付
						</view>
						<view v-else class="list__right list-text__right dawn-color-red">
							微信医保移动支付
						</view>
					</view>
					<view class="list-text">
						<view class="list__left">
							<view class="list__left__text">支付时间</view>
						</view>
						<view class="list__right list-text__right">
							{{ formatDateTime(examine.createTime)  || '' }}
						</view>
					</view>
					<view class="list-text">
						<view class="list__left">
							<view class="list__left__text">订单状态</view>
						</view>
						<view  class="list__right list-text__right">
							<tn-tag class="dawn-tag-sm" v-if="payOrder.state === 2">
								支付成功</tn-tag>
							<tn-tag v-else-if="payOrder.state === 5"
								class="dawn-tag-sm dawn-tag-sm__2">
								已退款
							</tn-tag>
							<tn-tag class="dawn-tag-sm dawn-tag-sm__4" v-else>
								待支付</tn-tag>
						</view>
					</view>
			
					<view class="list-text" style="display: block;">
						<view class="list__left">
							<view class="list__left__text">异常</view>
						</view>
						<view class="tn-margin-top-sm tn-bg-gray--light"
							style="border-radius: 10rpx;padding: 20rpx 30rpx;">
							<textarea v-model="examine.des" placeholder-style="color:#AAAAAA"></textarea>
						</view>
					</view>
				</view>
				<!-- payOrder.ifCode !== 'wxchs' -->
				<view class="tn-flex tn-footerfixed" v-if="payOrder.state === 2">
					<view class="tn-flex-1 justify-content-item tn-margin-sm tn-text-center">
						<tn-button @click="onExamine()" class="dawn-btn-lg dawn-btn-lg__danger">
							<text class="tn-icon-logout tn-padding-right-xs"></text>
							<text>审核退费</text>
						</tn-button>
					</view>
				</view>
			</view>
			
			<view v-if="show">
				<dawnMsg :box="dawnMsgBox" :msg="msg"></dawnMsg>
			</view>
		</view>

		<!-- loading -->
		<dawnLoading :show="loading"></dawnLoading>

		<!-- 悬浮按钮-->
		<NavBtn></NavBtn>
	</view>
</template>

<script>
	import page_mixin from '@/mixins/page_mixin.js'
	import dayjs from '@/plugin/dayjs/dayjs.min.js';
	import * as Util from '@/utils/util.js';
	import * as PayApi from "@/api/hospital/pay.js";
	import * as ChsApi from "@/api/hospital/chs.js";
	import * as RegisterApi from "@/api/hospital/register.js";
	import * as api from '@/api/api.js';
	import * as config from "@/api/config.js";

	import chs from "@/libs/chs.js";
	import {
		toLogin
	} from '@/libs/login.js';
	import {
		mapGetters
	} from "vuex";
	const app = getApp();

	export default {
		name: 'order',
		mixins: [page_mixin],
		computed: mapGetters(['appConfig', 'uid', 'isLogin', 'userInfo', 'patientInfo']),
		data() {
			return {
				iconSize: 38,
				size: 40,
				loading: false,
				showCode: false,
				show: false,
				msg: '',
				dawnMsgBox: '',
				success: 0,
				successTitle: '正在处理中，请稍候...',
				examineId: 0,
				queryData: {
					pageSize: 10,
					pageNo: 1,
					patientId: '',
					patientName: '',
					orderNumber: '',
					queryType: 'DETAIL'
				},
				status: -1,
				examine: {},
				payOrder: {},
				chsOrder: {},
				prescriptionList: [],
				actionsheetVisible: false
			}
		},
		async onLoad(options) {
			await this.$onLaunched;
			console.info("order return options");
			console.table(options);
			if (!this.isLogin) {
				toLogin();
				return;
			} else {
				this.examineId = Number.parseInt(options.examineId);
				this.getExamineDetail();
			}
		},
		methods: {
			getExamineDetail: function() {
				let that = this;
				this.loading = true;
				this.show = false;
				this.dawnMsgBox = '';
				PayApi.examineDetail(this.examineId).then(res => {
					console.table(res);
					this.loading = false;
					if (res.code === 0) {
						that.examine = res.data.examine;
						that.payOrder = res.data.payOrder;
						that.chsOrder = res.data.chsOrder;
					} else {
						that.show = true;
						that.msg = res.msg;
					}
				}).catch(err => {
					console.table(err);
					that.loading = false;
					that.show = true;
				})
			},
			onExamine() {
				let that = this;
				uni.showModal({
					title: '系统提示',
					content: '请确认是否要审核退费?',
					success: function(res) {
						if (res.confirm) {
							that.loading = true;
							that.show = false;
							that.dawnMsgBox = 'popup';
							PayApi.examine(that.examineId,that.userInfo.id).then(res => {
								that.loading = false;
								console.table(res);
								if (res.code === 0) {
									that.$util.Tips({
										title: '操作成功'
									});
									that.getExamineDetail();
								} else {
									that.show = true;
									that.msg = res.msg;
								}
							}).catch(err => {
								that.loading = false;
								that.show = true;
								that.msg = err.message;
							})
						} else if (res.cancel) {
							// console.log('取消');
							//TODO
						}
					}
				});
			},
			handleActionsheet() {
				this.actionsheetVisible = !this.actionsheetVisible;
			},
			formatDate: function(date) {
				return dayjs(date).format("YYYY-MM-DD");
			},
			fen2yuan(price) {
				return Util.fen2yuan(price)
			},
			formatDateTime: function(date) {
				return dayjs(date).format("YYYY-MM-DD HH:mm:ss");
			}
		}
	}
</script>

<style lang="scss" scoped>
	.dawn-success {
		height: auto;
		z-index: 100;
		padding: 30rpx 0rpx 60rpx 0rpx;
	}

	.list-text {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 10rpx 0rpx !important;
		border-bottom: 1px solid $dawn-line-color;

		&__right {
			font-size: $dawn-font-size-md;
		}
	}

	.list-icon-text,
	.list-image-text {
		padding: 15rpx 20rpx;
		border-bottom: 1px solid $dawn-theme-color-light;
	}

	.list {
		font-size: 14px;

		&__left {
			display: flex;
			align-items: center;
			justify-content: flex-start;

			&__icon,
			&__image {
				margin-right: 18rpx;
			}

			&__image {
				margin-right: 18rpx;
				width: 60rpx;
				height: 60rpx;
			}
		}

		&__right {
			display: flex;
			align-items: center;
			justify-content: flex-end;
		}
	}

	/* 卡 */
	.button-vip {
		width: 100%;
		height: 240rpx;
		border-radius: $dawn-border-radius;
		position: relative;
		z-index: 1;

		&::after {
			content: " ";
			position: absolute;
			z-index: -1;
			width: 100%;
			height: 100%;
			left: 0;
			bottom: 0;
			border-radius: inherit;
			opacity: 1;
			transform: scale(1, 1);
			background-size: 100% 100%;
		}
	}
</style>